// 轮播图
class Banner {
    constructor (select) {
      // 范围元素
      this.ele = document.querySelector(select)
      // imgBox
      this.imgBox = this.ele.querySelector('.imgBox')
      // pointBox
      this.pointBox = this.ele.querySelector('.pointBox')
      // 表示索引的变量
      this.index = 0
      // 定时器的返回值
      this.timer = 0
  
  
      // 直接调用启动器
      this.init()
    }
  
    // 0. 准备一个启动器
    init () {
      this.setPoint()
      this.autoPlay()
      this.overOut()
      this.bindEvent()
    }
  
    // 1. 设置焦点
    /*
      1-1. 拿到需要生成多少个焦点
        => 需要根据 imgBox 内子元素的数量
      1-2. 循环生成 li
        => 把生成的 li 放在 pointBox 内部
      1-3. 调整一下 pointBox 的宽度
    */
    setPoint () {
      // 1-1. 拿到需要生成多少个焦点
      const n = this.imgBox.children.length
  
      // 1-2. 循环生成焦点
      for (let i = 0; i < n; i++) {
        const li = document.createElement('li')
  
        // 默认第一个 li 有 active 类名
        if (i === 0) li.classList.add('active')
  
        // 每一个 li 添加一个类名
        li.classList.add('point')
  
        // 把索引以自定义属性的方式写在标签身上
        li.dataset.point = i
  
        this.pointBox.appendChild(li)
      }
  
      // 1-3. 调整一下宽度
      this.pointBox.style.width = (10 + 5) * n + 'px'
    }
  
    // 2. 切换一张
    /*
      如何切换一张
      2-1. 让当前这一张取消 active 类名
        => this.imgBox 的所有子元素中, 索引为 index 的那一张
        => 因为 图片 和 焦点 的索引是完全配套的, 顺便连焦点一起取消类名
      2-2. 修改 this.index 的值
        => 需要让 this.index 变成我接下来需要显示的那一张的索引
        => 给 changeOne 定义一个参数
          -> 如果 type 为 true, 我就 ++
          -> 如果 type 为 false, 我就 --
          -> 如果 type 为 数字, 那么就是一个索引
      2-3. 让 this.index 表示的这一张添加 active 类名
    */
    changeOne (type) {
      // 2-1. 取消 active 类名
      this.imgBox.children[this.index].classList.remove('active')
      this.pointBox.children[this.index].classList.remove('active')
  
      // 2-2. 根据 type 来决定修改 this.index 的值
      if (type === true) {
        this.index ++
      } else if (type === false) {
        this.index--
      } else {
        this.index = type
      }
  
      // 判断一下边界
      if (this.index >= this.imgBox.children.length) this.index = 0
      if (this.index < 0) this.index = this.imgBox.children.length - 1
  
      // 2-3. 添加 active 类名
      this.imgBox.children[this.index].classList.add('active')
      this.pointBox.children[this.index].classList.add('active')
    }
  
    // 3. 自动轮播
    /*
      每间隔一段时间, 切换下一张
        + 如何切换下一张, 调用 this.changeOne, 传递参数为 true
    */
    autoPlay () {
      this.timer = setInterval(() => this.changeOne(true), 4000)
    }
  
    // 4. 移入移出
    overOut () {
      this.ele.addEventListener('mouseover', () => clearInterval(this.timer))
      this.ele.addEventListener('mouseout', () => this.autoPlay())
    }
  
    // 5. 点击事件
    bindEvent () {
      this.ele.addEventListener('click', e => {
        // 处理事件对象兼容
        e = e || window.event
        // 处理事件目标兼容
        const target = e.target || e.srcElement
  
        // 判断左按钮
        if (target.className === 'left') this.changeOne(false)
  
        // 判断右按钮
        if (target.className === 'right') this.changeOne(true)
  
        // 判断某一张
        if (target.className === 'point') this.changeOne(target.dataset.point - 0)
      })
    }
  }
// 轮播
const b = new Banner('#banner')
console.log(b)
// 二级菜单
$('.ul1 li').on('mousemove',function(){
$('.ul1 > li').removeClass('active').eq($(this).index()).addClass('active')
$('.ol1').removeClass('active').eq($(this).index()).addClass('active')})
$('.ol1').on('mouseout',function(){
   $('.ol1 ').removeClass('active')
})

$('.common_ls_user').on('mouseover',function(){
  $('.ul2').addClass('active')
})
$('.common_ls_user').on('mouseout',function(){
  $('.ul2').removeClass('active')
})
$('.common_ls_cart').on('mouseover',function(){
  $('.denglu').addClass('active')
})
$('.common_ls_cart').on('mouseout',function(){
  $('.denglu').removeClass('active')
})
// 搜索
const inp = document.querySelector('input')
const ul = document.querySelector('.ul3')
// 1. 绑定 input 事件
inp.oninput = function () {
  const text = this.value.trim()
  const script = document.createElement('script')
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`
  document.body.appendChild(script)
  script.remove()
}
function fn(res) {
  if (!res.g) {
    ul.classList.remove('active')
    return
  }
  let str = ''
  res.g.forEach(item => {
    str += `<li>${ item.q }</li>`
  })
  ul.innerHTML = str
  ul.classList.add('active')
}
// 渲染
const ol2 = document.querySelector('#ol2')
const ol3 = document.querySelector('#ol3')
const ol4 = document.querySelector('#ol4')
const ol5 = document.querySelector('#ol5')
const ol6 = document.querySelector("#ol6")
  const script = document.createElement('script')
  // script.src = `https://mall.littleswan.com/api/get_pools?callback=fun&length=6&_=1628480635865`
  script.src = `https://mall.littleswan.com/api/get_pools?callback=fun&id=904%2C901%2C902%2C903%2C908&length=6&_=1628480635865`
  document.body.appendChild(script)
  script.remove()
  function fun(res) {
  console.log(res);
  res.poollist[901].data.forEach(function(item,index){
    const str =`
    <li><div class="xuan"><img src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035073867.jpg?x-oss-process=image/resize,w_120,limit_0/quality,Q_70" alt=""></div><p class="p1">${item.strPoolSkuTitle}</p></li>
    `
    ol2.innerHTML += str
  }) 
  res.poollist[902].data.forEach(function(item,index){
    const str =`
    <li><div class="xuan"><img src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619031445462.jpg?x-oss-process=image/resize,w_120,limit_0/quality,Q_70" alt=""></div><p class="p1">${item.strPoolSkuTitle}</p></li>
    `
    ol3.innerHTML += str
  })
  res.poollist[903].data.forEach(function(item,index){
    const str =`
    <li><div class="xuan"><img src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619035198470.jpg?x-oss-process=image/resize,w_120,limit_0/quality,Q_70" alt=""></div><p class="p1">${item.strPoolSkuTitle}</p></li>
    `
    ol4.innerHTML += str
  }) 
  res.poollist[908].data.forEach(function(item,index){
    const str =`
    <li><div class="xuan"><img src="https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619028346163.jpg?x-oss-process=image/resize,w_120,limit_0/quality,Q_70" alt=""></div><p class="p1">${item.strPoolSkuTitle}</p></li>
    `
    ol5.innerHTML += str
  })
}
// 返回顶部
$('.cc').click(() => {
  $('html, body').animate({ scrollTop: 0 })
})
